<template>
  <div class="file_box">
    <!-- 文件上传 -->
    <div class="d-flex flex-column">
      <div>
        <el-upload
          ref="upload"
          :show-file-list="false"
          class="upload-demo m-l10"
          :http-request="uploadFile"
          :on-remove="onRemove"
        >
          <template #trigger>
            <el-button
              class="btn_class"
              style="color: #fc7018; border: 1px solid #fc7018"
              plain
              color="#fff8f6"
            >
              <svg-icon
                icon-class="project-detail-icon-l-shangchuan"
                class="icon"
              />
              上传文件</el-button
            >
          </template>
        </el-upload>
      </div>
      <div class="filesContent d-flex">
        <div class="files_c_item" v-for="(v, i) in files" :key="i">
          <el-icon
            color="#999999"
            @click="handelFileDelete(v)"
            class="icon_delete"
          >
          
            <CircleCloseFilled />
          </el-icon>
          <span class="icon_name" @click="handelFileDown(v)"
            ><el-icon> <Document  /> </el-icon>{{ v.fileName }}</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElUpload, ElLoading, ElMessage,ElIcon } from 'element-plus'
import {ref, watch} from 'vue'
import {
    Document,
    CircleCloseFilled,
    Plus,
    CirclePlus,
    Download, Top
} from '@element-plus/icons-vue'
import { fileCallback } from '@/api/common.js'
import { fileControlApi } from '@/api/assets'
const props = defineProps({
 fileUrl:{
     type:Object,
     default:{}
 }
})

const fileUrl = ref(props.fileUrl);
const files = ref([]);
const emits = defineEmits(['update:fileUrl'])

// 下载
const handelFileDown = (item) => {
  let a = document.createElement('a')
  a.href = item.fileAddress
  a.download = item.fileName
  console.log(item)

  switch (item.fileName.split('.')[1]) {
    case 'pdf':
      a.target = '_blank'
      break
    case 'jpg':
      a.target = '_blank'
      break
    case 'bmp':
      a.target = '_blank'
      break
    case 'jpeg':
      a.target = '_blank'
      break
    case 'gif':
      a.target = '_blank'
      break
    case 'png':
      a.target = '_blank'
      break

    default:
      break
  }
  a.click(() => {
    return false
  })
  console.log(a.href);
  URL.revokeObjectURL(a.href)
  a.remove()
}

// 删除
const handelFileDelete = () => {
  fileUrl.value = null;
  files.value = [];
  ElMessage.success('删除成功!')
  emits('update:fileUrl', fileUrl.value);
}

const onRemove = () => {
  
}

const uploadFile = (file) => {
  // let url = 'uploadDocumentFile'
  let url = 'uploadDocumentFile2'
  let uploadFile = new FormData()
  uploadFile.append('file', file.file);
  uploadFile.append('associationId', '');
  uploadFile.append('businessType ', '');

    let types=['image/jpeg','image/png','image/gif','image/bmp','image/jpg']
    if(!types.includes(file.file.type)){
        ElMessage.warning('请上传图片!')
        return
    }
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)'
    })

  fileControlApi[url](uploadFile).then((res) => {
    if (res.code === '200') {
      loading.close()
      ElMessage.success('上传成功!')
      fileUrl.value = res.data.fileAddress;
      files.value = [res.data];
        console.log('res.data',res.data);
      // emits('update:fileUrl',fileUrl.value);
      emits('update:fileUrl',{fileName:file.file.name,fileAddress:fileUrl.value});
    }else{
        loading.close();
        ElMessage.error('上传失败!');
    }
  })
}

watch(
    () => props.fileUrl,
    (value) => {
        if(value!==null && value!==''){
            fileUrl.value = value;
            files.value = [value];
        }
    }
);
</script>
<style lang="scss" scoped>
.filesContent {
  align-items: center;
  flex-wrap: wrap;
  .files_c_item {
    min-width: 120px;
    padding: 0 30px;
    position: relative;
    top:5px;

    .icon_delete {
      position: absolute;
      top: -3px;
      right: 0;
      cursor: pointer;
    }
    .icon_delete:hover {
      color: red;
    }

    .icon_name {
      color: #999;
      cursor: pointer;
    }
    .icon_name:hover {
      color: #fc7018;
    }
  }
}

.restriction {
  font-size: 12px;
  font-family: SourceHanSansCN-Normal, SourceHanSansCN;
  color: #f12527;
}

.upload-img {
  position: relative;
  width: 67px;
  height: 67px;
  .el-icon {
    color: #fc7018;
  }

  :deep(.el-upload) {
    width: 100%;
    height: 100%;
    border: 1px solid #fc7018;
    background-color: #fff8f6;
  }
  .icon_delete {
    position: absolute;
    top: -10px;
    right: -10px;
    cursor: pointer;
  }
}

.filesContent_img {
  flex-wrap: wrap;
  .files_c_item_img {
    position: relative;
    width: 67px;
    height: 67px;
    border: 1px solid #fc7018;
    background-color: #fff8f6;
    border-radius: 5px;
    // cursor: pointer;
    text-align: center;
    line-height: 67px;
    img {
      position: absolute;
      width: 100%;
      z-index: 1;
      left: 0;
      top: 0;
      height: 100%;
      object-fit: cover;
    }
    .icon_delete {
      position: absolute;
      top: -8px;
      right: -8px;
      cursor: pointer;
      color: #fc7018;
      z-index: 3;
    }
    .icon_preview,
    .icon_down {
      cursor: pointer;
      color: #999;
      z-index: 3;
    }
    .icon_preview:hover,
    .icon_down:hover {
      color: #fc7018;
    }
  }
}

.file_box {
  min-height: 50px;
}
</style>
